<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/login.css">
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <h3>欢迎-登录</h3>
    <!-- 登录结果-提示框 -->
    <div class="alert alert-success" role="alert">
      提示消息
    </div>
    <!-- 表单 -->
    <div class="form_wrap">
      <form>
        <div class="mb-3">
          <label for="username" class="form-label">账号名</label>
          <input type="text" class="form-control username">
        </div>
        <div class="mb-3">
          <label for="password" class="form-label">密码</label>
          <input type="password" class="form-control password">
        </div>
        <button type="button" class="btn btn-primary btn-login"> 登 录 </button>
      </form>
    </div>
  </div>
  <!-- 引入bootstrap.min.js -->
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/js/bootstrap.min.js"></script>
  <!-- 引入axios -->
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.min.js"></script>
  <script>
    function myAlert(a, flag) {
      const tsk = document.querySelector('.alert-success')
      tsk.classList.add('show')
      tsk.innerHTML = a
      tsk.classList.add(flag ? 'alert-success' : 'alert-danger')
      setTimeout(() => {
        tsk.classList.remove('show')
        tsk.classList.remove(flag ? 'alert-success' : 'alert-danger')
      }, 2000)
    }
    const btn = document.querySelector('.btn-login')
    btn.addEventListener('click', function () {
      let username = document.querySelector('.username').value
      let password = document.querySelector('.password').value
      console.log(username, password);

      if (username.length < 8) {
        console.log('用户名必须大于八位');
        myAlert('用户名必须大于八位', false)
        return
      }
      if (password.length < 8) {
        console.log('密码必须大于六位');
        myAlert('密码必须大于六位', false)
        return
      }

      axios({
        url: 'http://hmajax.itheima.net/api/login',
        method: 'POST',
        data: {
          username,
          password
        }
      }).then(e => {
        console.log(e);
        console.log(e.data.message)
        myAlert(e.data.message, true)
      }).catch(l => {
        console.log(l.response.data.message)
        myAlert(l.response.data.message, false)
      })
    })
  </script>
</body>

</html>